<template>
   <div>
          <h2 class="public-title">充值</h2>
          <div class="pc-cont" style="position:relative">
            <div v-if="loading">
                <Spin fix size="large"></Spin>
            </div>
            <div class="recharge">
             <div>
                <div class="recharge-tab clearfix">
                <a href="javascript:void(0);" @click="chooseOnline" :class="{active:online}" ref="online"><span class="icon icon-xs"></span>线上支付</a>
                <a href="javascript:void(0);" :class="{active:!online}" @click="chooseOffline"><span class="icon icon-zx"></span>线下支付</a>
              </div>
             </div>
              <!-- 线上支付 -->
              <div class="recharge-cont" v-show="online">
                <div v-if="onlineOne && payWayList.list2 && payWayList.list2.length > 0" class="step-one">
                  <div class="recharge-item clearfix">
                    <label for="">选择充值方式</label>
                    <div class="bank-cont">
                      <p class="bank-result" @click="selectItem=!selectItem" id="onlineSelected"><img :src="onlinefirstlogo" alt="">{{onlinefirstname}}<span class="icon icon-arrow"></span></p>
                      <ul class="bank-list" v-show="selectItem">
                        <li v-for="(item,index) in payWayList.list2" :key="index"  @click="chooseOnlineItem(index)">
                          <p class="bank-result"><img :src="imgRequest+item.logo" alt="">{{item.payment_name}}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="choosebankdiv" v-show="gtbank">
                    <label for="" style="marginRight:21px">请选择充值银行</label>
                    <select  placeholder="请选择" style="width: 447px" class="chooseBnak" v-model="selectedbankcode" @change="bankcodeSelect">
                      <option :value="item.bank_code" v-for="(item,index) in bankList" :key="index">{{item.name}}</option>
                    </select>
                  </div>
                  <div class="recharge-item clearfix">
                    <label for="">输入充值金额</label>
                    <div class="bank-cont">
                      <input class="bank-result inputMoney" v-model="onlineRechargeAmount" type="text" />
                      <p class="tips">充值金额下限{{onlineMinMoney}}人民币</p>
                    </div>
                  </div>
                  <button class="pink-btn btn" :class="{graybtn:onlineNext}" :disabled="onlineNext" @click="onlineGoRecharge">下一步</button>
                </div>

                <!-- 线上支付信息 -->
                <div class="recharge-msg" v-show="payOnlineInfo">
                  <div class="title">支付信息</div>
                  <div class="cont clearfix">
                    <div class="left fl">
                      <p><label for="">发卡银行：</label>{{issuingBank}}</p>
                      <!-- <p><label for="">收款人：</label>{{collector}}</p> -->
                      <p><label for="">订单号：</label>{{order_no}}</p>
                      <!-- <p><label for="">附加码(必填)：</label><span class="red">{{extra_code}}</span></p> -->
                      <p><label for="">充值金额：</label>{{onlineRechargeAmount}} 人民币</p>
                    </div>
                    <div class="right fr">
                      <!-- <img :src="codeUrl" alt=""> -->
                      <span id="qrcode" ref="qrcode"></span>
                      <p>扫一扫二维码支付</p>
                    </div>
                    <div class="clearfix"><a href="javascript:void(0)" class="pink-btn" @click="onLineComplatePay">我已完成支付</a></div>
                  </div>
                </div>
              </div>
              <!-- 线下支付 -->
              <div class="recharge-cont" v-show="offline">
                <div v-if="offlineOne && payWayList.list && payWayList.list.length > 0" class="step-one">
                  <div class="recharge-item clearfix">
                    <label for="">选择充值方式</label>
                    <div class="bank-cont">
                      <p class="bank-result" @click="selectItem=!selectItem" id="offlineSelected"><img :src="offlinefirstlogo" alt="">{{offlinefirstname}}<span class="icon icon-arrow"></span></p>
                      <ul class="bank-list" v-show="selectItem">
                        <li v-for="(item,index) in payWayList.list" :key="index" @click="chooseOfflineItem(index)">
                          <p class="bank-result"><img :src="imgRequest+item.logo" alt="">{{item.payment_name}}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="recharge-item clearfix">
                    <label for="">输入充值金额</label>
                    <div class="bank-cont">
                      <input class="bank-result inputMoney" v-model="offlineRechargeAmount" type="text" />
                      <p class="tips" v-show="tipsShow">充值金额下限{{offlineMinMoney}}人民币，上限{{offlineMaxMoney}}人民币</p>
                      <p class="tips" v-show="noRecharge">该充值方式已满额</p>
                    </div>
                  </div>
                  <button class="pink-btn btn" :class="{graybtn:offlineNext}" :disabled="offlineNext" @click="offlineGoRecharge">下一步</button>
                </div>
                <!-- 线下支付信息 -->
                <div class="recharge-msg" v-show="payInfo">
                  <div class="title">支付信息</div>
                  <div class="cont clearfix">
                    <div class="left fl">
                      <p>
                        <span>
                          <textarea id="collectBank" v-text="'发卡银行:'+collectBank"></textarea>
                        </span>
                        <span @click="copyUrl('collectBank')" class="Iconleft">
                          <Icon type="document"></Icon>
                          </span>
                      </p>
                      <p>
                        <span>
                          <textarea id="collector" v-text="'收款人:'+collector"></textarea>
                        </span>
                        <span  @click="copyUrl('collector')" class="Iconleft">
                          <Icon type="document"></Icon>
                          </span>
                      </p>
                      <p>
                      <span>
                          <textarea id="collectNub" v-text="'收款账号:'+collectNub"></textarea>
                      </span>
                        <span  @click="copyUrl('collectNub')" class="Iconleft">
                          <Icon type="document"></Icon>
                          </span>
                      </p>
                      <p>
                        <span>
                          <textarea class="red" id="extra_code"  v-text="'附加码(必填):'+ this.rechargeOffline.code"></textarea>
                        </span>
                        <span  @click="copyUrl('extra_code')" class="Iconleft">
                          <Icon type="document"></Icon>
                        </span>
                      </p>
                      <p>
                        <span>
                          <textarea id="offlineRechargeAmount"  v-text="'充值金额:'+offlineRechargeAmount+'人民币'"></textarea>
                        </span>
                        <span  @click="copyUrl('offlineRechargeAmount')" class="Iconleft">
                          <!-- <Icon type="document-text"></Icon> -->
                          </span>
                      </p>                    
                    </div>
                    <div class="right fr" v-if="offlineCode">
                      <img :src="imgRequest + '/' + offlineCode" alt="">
                      <p>{{collectBank}}扫码支付</p>
                    </div>
                    <div class="right fr" :class="{'border-none' : !offlineCode}" v-else>
                      <img :src="imgRequest + '/' + offlineLogo" alt="">
                      <p>{{collectBank}}支付</p>
                    </div>
                    <div class="clearfix"><a href="javascript:void(0)" class="pink-btn" @click="complatePay">点击确认提交</a></div>
                  </div>
                </div>
              </div>
              
              <!-- 底部 -->
              <div class="info-box" v-show="promptt">
                <div class="title" >充值说明</div>
                <p v-html="prompt"></p>
              </div>
            </div>
          </div>
          <div class="recharged recharg-status" v-show="falg">
            <img src="@/assets/images/common_success_pic@2x.png" alt="">
            <p>充值成功</p>
            <Button type="primary" @click="instance">返回</Button>
          </div>
          <div class="recharged recharg-status" v-show="errFlag">
            <img src="@/assets/images/common_fault_pic@2x.png" alt="">
            <p>充值异常</p>
            <Button type="primary" @click="efreshRecharge">重新充值</Button>
          </div>

          <Modal
            v-model="modalPayAfter"
            width="400"
            title="温馨提示"
            okText='支付成功'
            cancelText='未支付'
            @on-ok="ModalOk"
            @on-cancel="ModalCancel"
          >
            <div style="font-size:14px;">请根据支付情况点击下方按钮请不要重复支付。</div>
          </Modal>
        </div>
        
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      modal3 :false,
      falg :0,
      promptt:0,
      payInfo: false, //支付信息展示
      selectItem: false, //下拉支付方式隐藏
      online: true,
      offline: false,
      payWayList: {},
      onlinefirstlogo: "",
      onlinefirstname: "",
      offlinefirstlogo: "",
      offlinefirstname: "",
      selectorIndex: 0,
      offlineMinMoney: 0, //充值金额下限
      offlineMaxMoney: 0, //充值金额上限
      onlineMinMoney: 0,
      offlineRechargeAmount: "", //线下充值金额
      onlineRechargeAmount: "", //线上充值金额
      onlineNext: true,
      offlineNext: true,
      extra_code: "", //线下支付附加码
      tipsShow: true,
      offlineCode: "",
      offlineLogo: "",
      noRecharge: false,
      collectBank: "", //收款账号银行
      collector: "", //收款人
      collectNub: "", //收款账号
      type_mode: "",
      gtbank: false,
      bankList: [],
      payOnlineInfo: false, //在线支付信息
      //高通网银支付的bank_code
      selectedbankcode: "",
      codeUrl: "",
      order_no: "",
      prompt:"",
      prompt2:"",
      prompt3:"",
      prompt4:"",

      rechargeOffline: [],
      loading: false,

      errFlag: false,
      onlineOne: true,
      offlineOne: false,

      issuingBank: '',

      modalPayAfter: false,
    };
  },
  created() {
    this.getPayWayList();
    // this.focusonInp();
  },
  watch: {
    //下线验证充值金额
    offlineRechargeAmount: function() {
      if ((+this.offlineRechargeAmount) >= (+this.offlineMinMoney) && (+this.offlineRechargeAmount) <= (+this.offlineMaxMoney)) {
        this.offlineNext = false;
      } else {
        this.offlineNext = true;
      }
      
    },
    //在线验证充值金额
    onlineRechargeAmount: function() {
      if ((+this.onlineRechargeAmount) && (+this.onlineRechargeAmount) >= (+this.onlineMinMoney) && this.onlineRechargeAmount < 9999999) {
          this.onlineNext = false;
        } else {
          this.onlineNext = true;
        }
    },
    offlinefirstname() {
      if ((+this.offlineRechargeAmount) >= (+this.offlineMinMoney) && (+this.offlineRechargeAmount) <= (+this.offlineMaxMoney)) {
        this.offlineNext = false;
      } else {
        this.offlineNext = true;
      }
    },
    onlinefirstname() {
      if ((+this.onlineRechargeAmount) > (+this.onlineMinMoney) && (+this.onlineRechargeAmount) < 9999999) {
        this.offlineNext = false;
      } else {
        this.offlineNext = true;
      }
    }
  },
  methods: {
    copyUrl:function(id) {
      var ele = document.getElementById(id);
      ele.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$Message.success("复制成功");
    },
    instance(){
      this.$Modal.success({
          content: "已完成支付，确认关闭？",
          onOk: () => {
            this.online = true
            this.onlineOne = true
            this.offline = false
            this.falg = 0      //返回
            this.onlineRechargeAmount = ''
            this.offlineRechargeAmount = ''
          }
      });
    },
    efreshRecharge() { //充值异常
      this.onlineOne = true
      this.errFlag = 0
    },

    //获取银行简码
    bankcodeSelect() {
      console.log(this.selectedbankcode);
    },
    //光标在充值金额的input
    focusonInp: function() {
      window.onload = function() {
        document.getElementsByClassName("inputMoney")[0].focus();
      };
    },
    // 获取充值方式的列表
    getPayWayList: function() {
      if (!JSON.parse(localStorage.getItem("isUser"))) {
        this.payWayList.list2 = [];
        this.payWayList.list = [];
        this.$Message.info('游客暂无权限，请先注册会员')
				return
      }
      if (localStorage.getItem("token")) {
        var currentToken = localStorage.getItem("token");
      }
      this.loading = true;
      this.$http.get(this.urlRequest + "?m=api&c=recharge&a=offlineIndex&token=" + currentToken).then(res => {
          this.loading = false;
          this.payWayList = res.data;
          // 线上
          if (res.data.list2.length > 0) {
            this.chooseOnlineItem();
            this.onlinefirstlogo = this.imgRequest + this.payWayList.list2[0].logo;
            this.onlinefirstname = this.payWayList.list2[0].payment_name;
            this.onlineMinMoney = this.payWayList.list2[0].lower_limit;
            //获取高通网银银行列表
            if (res.data.list2[0].type_mode == 2) {
              this.gtbank = true;
              var params = {
                token: localStorage.getItem("token"),
                payment_id: this.payWayList.list2[0].payment_id
              };
              this.$http.post(this.urlRequest + "?m=api&c=recharge&a=getRechargeBankList", jsonToString(params)).then(res => {
                //银行列表
                this.bankList = res.data.bankList;
                this.selectedbankcode = res.data.bankList[0].bank_code;
              });
            }
          }
          //线下
          if (res.data.list.length > 0) {
            this.offlinefirstlogo = this.imgRequest + this.payWayList.list[0].logo;
            this.offlinefirstname = this.payWayList.list[0].payment_name;
            res.data.list.forEach(val => {
              if (val.min_recharge>res.data.recharge) {
                this.offlineMinMoney = val.min_recharge
              } else {
                this.offlineMinMoney = res.data.recharge;
              }
            });
            this.extra_code = res.data.extra_code;
            this.offlineMaxMoney = this.payWayList.list[0].max_recharge;
            this.offlineCode = this.payWayList.list[0].code;
            this.offlineLogo = this.payWayList.list[0].logo;
          }
          if (this.offlineMaxMoney == -1) {
            this.tipsShow = false;
            this.noRecharge = true;
            this.offlineNext = true;
          } else {
            this.tipsShow = true;
            this.noRecharge = false;
          }
        }).catch(error => {
          this.loading = false;
      });
    },
    //选择在线支付方式
    chooseOnlineItem: function(index) {
      if(!index) {
        index = 0;
      }
      this.selectorIndex = index;
      this.onlineRechargeAmount = '';
      console.log(this.payWayList.list2[this.selectorIndex])
      // if ((+this.offlineRechargeAmount) >(+this.offlineMinMoney) &&(+this.offlineRechargeAmount) < (+this.offlineMaxMoney)) {
      //   this.offlineNext = false;
      // } else {
      //   this.offlineNext = true;
      // }
      this.selectItem = false;
      this.onlinefirstlogo = this.imgRequest + this.payWayList.list2[this.selectorIndex].logo;
      this.onlinefirstname = this.payWayList.list2[this.selectorIndex].payment_name;
      this.onlineMinMoney = this.payWayList.list2[this.selectorIndex].lower_limit;
      this.type_mode = this.payWayList.list2[this.selectorIndex].type_mode;
      // if ((+this.onlineRechargeAmount) != '' && (+this.onlineRechargeAmount) > (+this.onlineMinMoney)) {
      //   this.onlineNext = false;
      // } else {
      //   this.onlineNext = true;
      // }
      if (this.type_mode == 2) {
        this.gtbank = true;
        var params = {
          token: localStorage.getItem("token"),
          payment_id: this.payWayList.list2[this.selectorIndex].payment_id
        };
        this.$http
          .post(
            this.urlRequest + "?m=api&c=recharge&a=getRechargeBankList",
            jsonToString(params)
          )
          .then(res => {
            //银行列表
            this.bankList = res.data.bankList;
            this.selectedbankcode = res.data.bankList[0].bank_code;
            console.log(this.selectedbankcode);
          });
      } else {
        this.gtbank = false;
      }
    },
    // 选择线下支付方式
    chooseOfflineItem: function(index) {
      if(!index) {
        index = 0;
      }
      this.offlineRechargeAmount = '';
      this.selectorIndex = index;
      // if ((+this.offlineRechargeAmount) >(+this.offlineMinMoney) &&(+this.offlineRechargeAmount) < (+this.offlineMaxMoney)
      // ) {
      //   this.offlineNext = false;
      // } else {
      //   this.offlineNext = true;
      // }
      this.selectItem = false;
      this.offlinefirstlogo =this.imgRequest + this.payWayList.list[this.selectorIndex].logo;
      this.prompt = this.payWayList.list[this.selectorIndex].prompt;
      this.prompt = this.prompt.replace(/\\n/g,'</br>') 
      this.offlinefirstname = this.payWayList.list[this.selectorIndex].payment_name;
      this.offlineMinMoney = parseInt(
      this.payWayList.list[this.selectorIndex].min_recharge
      );
       if(this.payWayList.list[this.selectorIndex].prompt==""){
        this.promptt = 0
      }else{
         this.promptt = 1
      }
      this.offlineMaxMoney = this.payWayList.list[
        this.selectorIndex
      ].max_recharge;
      if (this.offlineMaxMoney == -1) {
        this.tipsShow = false;
        this.noRecharge = true;
        this.offlineNext = true;
      } else {
        this.tipsShow = true;
        this.noRecharge = false;
      }
    },
    //选择线上充值
    chooseOnline: function() { 
      if (this.payOnlineInfo || this.payInfo) {
        this.$Modal.confirm({
          title: '温馨提示',
          content: "切换后将取消当前未完成订单，是否继续？",
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            this.onDataInfo()
          }
        });
      } else {
        this.onDataInfo()
      }
    },
    onDataInfo() { //点击线上充值数据展示处理
      this.falg = 0;
      this.promptt = 0;
      this.online = true;
      this.onlineOne = true;
      this.errFlag = false;
      this.payOnlineInfo = false;
      this.offline = false;
      this.offlineOne = false;
      this.selectItem = false;
      this.payInfo = false
      this.offlineRechargeAmount = ''
    },
    //选择线下充值
    chooseOffline: function() {
      if (this.payWayList.list.length > 0) {
        this.chooseOfflineItem();
      }
      if (this.payOnlineInfo || this.payInfo) {
        this.$Modal.confirm({
          title: '温馨提示',
          content: "切换后将取消当前未完成订单，是否继续？",
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            this.offDataInfo()
          }
        });
      } else {
        this.offDataInfo()
      }
      
    },
    offDataInfo() { //点击线下充值数据展示处理
      if (this.prompt=="") {
        this.promptt = 0
      } else {
        this.promptt = 1
      }
      this.offline = true;
      this.offlineOne = true;
      this.payInfo = false;
      this.online = false;
      this.onlineOne = false;
      this.falg = 0;
      this.errFlag = false;
      this.payOnlineInfo = false;
      this.selectItem = false;
      this.onlineRechargeAmount = ''
    },
    // 线下充值
    offlineGoRecharge: function() {
      this.falg = 0       //提交
      this.collectBank = this.payWayList.list[this.selectorIndex].payment_name;
      this.collector = this.payWayList.list[this.selectorIndex].account_name;
      this.collectNub = this.payWayList.list[this.selectorIndex].account;
      console.log(this.offlineRechargeAmount)
      this.offlineCode = this.payWayList.list[this.selectorIndex].code;
      this.offlineLogo = this.payWayList.list[this.selectorIndex].logo;
      console.log('this.imgRequest：' + this.imgRequest)
      console.log('this.offlineCode：' + this.offlineCode)
      console.log('this.offlineLogo：' + this.offlineLogo)
      var params = {
        token: localStorage.getItem("token"),
        id: this.payWayList.list[this.selectorIndex].id,
        money: this.offlineRechargeAmount
      };
      this.loading = true;
      this.$http.post(this.urlRequest + "?m=api&c=recharge&a=rechargeOffline", params).then(res => {
        this.loading = false;
        if (res.data.status == 0) {
          this.rechargeOffline = res.data
          this.payInfo = true;
          this.offlineOne = false;
        } else {
          this.$Message.error(res.data.ret_msg);            
        }
      }).catch(error => {
          this.loading = false;
          this.$Message.error("数据请求超时");
      });


    },
    // 线上充值
    onlineGoRecharge: function() {
      if (localStorage.getItem("userData") != null) {
        var params = {
          token: localStorage.getItem("token"),
          channel_type: this.payWayList.list2[this.selectorIndex].channel_type,
          type: this.payWayList.list2[this.selectorIndex].type,
          money: this.onlineRechargeAmount,
          pay_type: this.payWayList.list2[this.selectorIndex].payment_name,
          bank_code: this.selectedbankcode
        };
      }
      if (params.channel_type == 'wx') {
        this.issuingBank = '微信扫码'
      } else if (params.channel_type == 'wxwap') {
        this.issuingBank = '微信H5'
      } else if (params.channel_type == 'ali') {
        this.issuingBank = '支付宝扫码'
      } else if (params.channel_type == 'aliwap') {
        this.issuingBank = '支付宝H5'
      } else if (params.channel_type == 'qq') {
        this.issuingBank = 'QQ钱包扫码'
      } else if (params.channel_type == 'qqwap') {
        this.issuingBank = 'QQ钱包H5'
      } else if (params.channel_type == 'wy') {
        this.issuingBank = '网银跳转'
      } else if (params.channel_type == 'wykj') {
        this.issuingBank = '网银快捷'
      }
      this.loading = true;
      this.$http.post(this.urlRequest + "?m=api&c=recharge&a=rechargeOnline", jsonToString(params)).then(res => {
          this.loading = false;
          if (this.type_mode == 0) {
            if (res.data.status == 0) {
              this.payOnlineInfo = true;
              this.onlineOne = false;
              this.order_no = res.data.order_no;
              this.collectBank = res.data.type;
              this.$nextTick (function () {
                this.$refs.qrcode.innerHTML = '';
                this.qrcode(res.data.code_url);
              })
              // this.codeUrl =this.urlRequest +"?m=api&c=recharge&a=payQrcode&qrcode_url=" +res.data.code_url + "&token=" +JSON.parse(localStorage.getItem("userData")).token;
            } else {
              this.errFlag = 1
              this.onlineOne = false
            }
          } else if (this.type_mode == 1) {
            // window.open(res.data)
            // document.write(res.data);
            // document.getElementById("payFrom").submit();

            this.$Modal.confirm({
              title: '温馨提示',
              content: "正向你跳转第三方支付",
              okText: '去支付',
              cancelText: '取消',
              onOk: () => {
                this.ModalPayOk()
              }
            });

            this.codeUrl = this.urlRequest
              + "?m=api&c=recharge&a=rechargeOnline"
              + "&token=" + localStorage.getItem("token")
              + "&channel_type=" + this.payWayList.list2[this.selectorIndex].channel_type
              + "&type=" + this.payWayList.list2[this.selectorIndex].type
              + "&pay_type=" + this.payWayList.list2[this.selectorIndex].payment_name
              + "&money=" + this.onlineRechargeAmount;
            // window.open(this.codeUrl)
            // this.$Modal.confirm({
            //   title: '温馨提示',
            //   content: "请根据支付情况点击下方按钮请不要重复支付。",
            //   okText: '支付完成',
            //   cancelText: '未支付',
            //   onOk: () => {
            //     this.ModalOk()
            //   },
            //   onCancel: () => {
            //     this.ModalCancel()
            //   }
            // });
          } else if (this.type_mode == 2) {
            // window.open(res.data)
            // document.write(res.data);
            // document.getElementById("payFrom").submit();

            this.$Modal.confirm({
              title: '温馨提示',
              content: "正向你跳转第三方支付",
              okText: '去支付',
              cancelText: '取消',
              onOk: () => {
                this.ModalPayOk()
              }
            });

            this.codeUrl = this.urlRequest
              + "?m=api&c=recharge&a=rechargeOnline"
              + "&token=" + localStorage.getItem("token")
              + "&channel_type=" + this.payWayList.list2[this.selectorIndex].channel_type
              + "&type=" + this.payWayList.list2[this.selectorIndex].type
              + "&pay_type=" + this.payWayList.list2[this.selectorIndex].payment_name
              + "&money=" + this.onlineRechargeAmount
              + "&bank_code" + this.selectedbankcode;
            // window.open(this.codeUrl)
            // this.payOnlineInfo = true;
            // this.onlineOne = false;
          }

          // if (res.data.status == 0) {
          //   if (this.type_mode == 1 || this.type_mode == 2) {
          //     document.write(res.data);
          //     document.getElementById("payFrom").submit();
          //   }
          //   if (this.type_mode == 0) {
          //     this.payOnlineInfo = true;
          //     this.onlineOne = false;
          //     this.order_no = res.data.order_no;
          //     this.collectBank = res.data.type;
          //     this.codeUrl =this.urlRequest +"?m=api&c=recharge&a=payQrcode&qrcode_url=" +res.data.code_url + "&token=" +JSON.parse(localStorage.getItem("userData")).token;
          //   }
          // } else {
          //   this.errFlag = 1
          //   this.onlineOne = false
          // }
        }).catch(error => {
          this.loading = false;
          this.$Message.error("数据请求超时");
        });
      },
      qrcode (Url) {
          let qrcode = new QRCode('qrcode', {  
              width: 150,  // 设置宽度 
              height: 150, // 设置高度
              text: Url
          })  
      },
      ModalPayOk() {
        window.open(this.codeUrl)
        this.modalPayAfter = true;
      },
      ModalOk() {
        this.modalPayAfter = false;
        this.onlineOne = false;
        this.falg = 1;
      },
      ModalCancel() {
        this.modalPayAfter = false;
        this.onlineOne = false;
        this.errFlag = 1
      },

      onLineComplatePay() {
        var params = {
          token: localStorage.getItem("token"),
          order_no: this.order_no
        };
        this.loading = true;
        this.$http.post(this.urlRequest + "?m=api&c=recharge&a=getRechargeInfo", params).then(res => {
          this.loading = false;
          if (res.data.status == 0) {
            setTimeout(()=> {
                if (res.data.state == 0) {
                  // this.$Message.success("复制成功");
                  return
                }
                if (res.data.state == 1) {
                  this.falg = 1
                  this.payOnlineInfo = false
                }
            }, 3000)
          }
        }).catch(error => {
          this.loading = false;
          this.$Message.error("数据请求超时");
      });
    },
    //线下充值
    complatePay: function() {
      this. promptt=0
      var params = {
        token: localStorage.getItem("token"),
        order_sn: this.rechargeOffline.order_sn
      };
      this.loading = true;
      this.$http.post(this.urlRequest + "?m=api&c=recharge&a=setRechargeMusic", params).then(res => {
        this.loading = false;
        if (res.data.status == 0) {
          this.falg = 1
          this.payInfo  = false
        } else {
          this.$Message.error(res.data.ret_msg);
          this.offline = false
        }
      }).catch(error => {
          this.loading = false;
          this.$Message.error("数据请求超时");
      });


      // if (localStorage.getItem("userData") != null) {
      //   var params = {
      //     token: localStorage.getItem("token"),
      //     id: this.payWayList.list[this.selectorIndex].id,
      //     money: this.offlineRechargeAmount,
      //     extra_code: this.extra_code
      //   };
      // }
      // this.$http
      //   .post(
      //     this.urlRequest + "?m=api&c=recharge&a=rechargeOffline",
      //     jsonToString(params)
      //   )
      //   .then(res => {
      //     console.log(res);
      //     if (res.data.status == 0) {
      //       //可以进行下一步
      //       this.falg = 1
      //       this.payInfo  = false
      //       this.rechargeOffline = res.data
      //       // this.$Message.success("充值成功！");
      //     } else {
      //       this.$Message.error(res.data.ret_msg);
      //       this.offline = false
            
      //     }
      //   });
    },
    //复制
    
  }
};
</script>

<style scoped>
.recharge .recharge-msg .cont .right {
  padding-left: 0;
  text-align: center;
}
.recharge .recharge-msg .cont .right #qrcode {
  display: inline-block;
  width: 150px;
  height: 150px;
}
.recharge .recharge-msg .cont .right p {
  margin-left: 0;
}
.recharge .recharge-msg .cont .border-none img {
  border: none;
}
.recharge-cont .recharge-item .bank-list {
  width: 447px;
  max-height: 225px;
  overflow-x: hidden;
  z-index: 10000;
  background-color: #fff;
  border-top: 1px solid #999;
}
.graybtn {
  background-color: #ccc;
  border: 0px !important;
}
.pink-btn {
  border: 0px !important;
}
.recharge .recharge-msg .cont .left{
  width: 335px;
}
/* .recharge .recharge-msg .cont .left p {
  margin-bottom: 23px;
} */
.recharge .recharge-msg .cont{
  position: relative;
}
.Iconleft{
    position: absolute;
    font-size: 20px;
    left: 340px;
    margin-top:-45px; 
}
.progress-status li {
  text-align: center;
  line-height: 25px;
  width: 135px;
  padding-left: 0;
}
.recharged{
    text-align: center;
    margin-top: 80px;
}
.recharge .recharge-msg .cont .left p{
  margin-bottom: 5px;
}
.pc-bottom .pc-right {
  border: 1px solid #eee;
  min-height: 575px !important;
}
.pc-bottom .pc-left {
  min-height: 600px !important;
}
.chooseBnak {
  height: 32px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.choosebankdiv {
  margin-bottom: 30px;
}

.recharg-status img {
  width: 113px;
}
.recharg-status p {
  font-size: 14px;
  font-weight: 700;
}
.ivu-btn-primary {
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    width: 200px;
    margin-top: 30px;
}
textarea{
  border: none;
  resize:none;
  outline:none;
  overflow-x:hidden;overflow-y:hidden;
  width: 100%;
}
</style>



// WEBPACK FOOTER //
// src/components/topUpCenter/recharge/rechargeOld.vue